<template>
  <div style="padding: 20px">
    <el-card shadow="never">
      <el-form :model="state.search" inline>
        <el-form-item label="灭火器类型">
            <el-select v-model="state.search.type" placeholder="请选择" clearable>
          <el-option :label="item.label" :value="item.value" v-for="item in extinguisherOption" :key="item.value"></el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="生产厂家">
            <el-input v-model="state.search.factory" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="型号">
            <el-input v-model="state.search.model" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="过期时间">
            <el-date-picker v-model="state.search.scrap_date" type="date" placeholder="请选择" style="width:180px"
            value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList" size="mini">搜索</el-button>
          <el-button type="warning" @click="reset" size="mini">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never" style="margin-top: 20px">
      <!-- <template #header>

         <el-button type="primary" @click="addOrUpdate()" size="mini">添加</el-button>
        <div class="red">
          <div >
            《建筑灭火器配置验收及检查规范》GB50444-2008灭火器维修期限：水基型灭火器为出厂期满3年，首次维修以后每满1年；干粉灭火器、洁净气体灭火器、二氧化碳灭火器为出厂期满5年，首次维修以后每满2年.
          </div>
          <div>
            《消防设施通用规范》GB55036-2023灭火器报废年限：水基型灭火器为6年；干粉灭火器、洁净气体灭火器为10年；二氧化碳灭火器为12年。
          </div>
        </div>
      </template> -->
      <!-- <el-button type="primary" @click="addOrUpdate()" size="mini">添加</el-button> -->
      <el-table :data="state.list" v-loading="state.loading">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="灭火器类型" prop="type" min-width="120">
          <template #default="{ row }">
            {{ paraphrase(row.type, extinguisherOption) }}
          </template>
        </el-table-column>
        <el-table-column label="型号" prop="model" min-width="80"></el-table-column>
        <el-table-column label="生产厂家" prop="factory" min-width="120"></el-table-column>
        <el-table-column label="出厂日期" min-width="120" prop="date_of_manufacture"></el-table-column>
        <el-table-column label="报废日期" min-width="120" prop="scrap_date"></el-table-column>
        <el-table-column label="数量" min-width="120" prop="quantity"></el-table-column>
        <el-table-column label="上次维修日期" min-width="120" prop="last_maintenance_date"></el-table-column>
        <el-table-column label="维修日期" min-width="120" prop="maintenance_period"></el-table-column>
        <!-- <el-table-column label="操作" min-width="120">
          <template #default="{ row }">
            <el-button type="primary" link @click="addOrUpdate(row)">编辑</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination
        style="margin-top: 10px"
        background
        v-model:current-page="state.pagination.page"
        v-model:page-size="state.pagination.rows"
        layout="->,total, sizes, prev, pager, next, jumper"
        :total="state.total"
        @current-change="getList"
        @size-change="getList"
      />
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, toRaw } from 'vue'
import { guoqiList } from '@/api/miehuoqi'
import { paraphrase } from 'toolkit-x'
import { extinguisherOption, expiredTimeOption } from '@/util/explain'
const addOrUpdateRef = ref()
const state = reactive({
  loading: false,
  search: {
    type: '',
    factory:'',
    model:'',
    scrap_date:'',
    maintain_left: '',
    expire_left: ''
  },
  pagination: {
    rows: 20,
    page: 1
  },
  total: 0,
  list: []
})
const resetForm = toRaw({ ...state.search })
const getList = async (page = 1) => {
  state.loading = true
  if (page === 1) state.pagination.page = 1
  const { data } = await guoqiList({ ...state.pagination, ...state.search }).finally(() => (state.loading = false))
  state.list = data.list
  state.total = data.total
}
getList()

const addOrUpdate = (row?) => {
  addOrUpdateRef.value.open(row)
}
const reset = () => {
  state.search = resetForm
  getList(1)
}
</script>

<style lang="scss" scoped>
.red{
    color: red;
    font-size: 14px;
    margin-top: 15px;
}
</style>
